<template>
	<div class="wrapper">
		<!-- 顶部应用栏 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<button class="mdc-button mdc-button--text back-btn" @click="goBack">
						<i class="material-icons">arrow_back</i>
					</button>
					<h1 class="mdc-top-app-bar__title">订单详情</h1>
				</section>
			</div>
		</header>

		<!-- 主要内容区域 -->
		<div class="main-content">
			<!-- 加载状态 -->
			<div v-if="loading" class="loading-container">
				<div class="loading-spinner">
					<i class="material-icons loading-icon">refresh</i>
					<p>加载订单详情中...</p>
				</div>
			</div>

			<!-- 错误状态 -->
			<div v-else-if="error" class="error-container">
				<div class="error-content">
					<i class="material-icons error-icon">error</i>
					<h3>加载失败</h3>
					<p>{{ error }}</p>
					<button class="mdc-button mdc-button--raised retry-btn" @click="loadOrderDetail">
						<i class="material-icons">refresh</i>
						<span>重试</span>
					</button>
				</div>
			</div>
			
			<!-- 页面顶部操作模块 + 订单详情内容（在有订单时一起渲染） -->
			<div v-else-if="order" class="order-wrapper">
				<div class="top-action-bar">
					<button
						class="header-action-btn delete"
						@click.stop="cancelOrder"
					>
						<i class="material-icons">delete</i>
						<span>删除订单</span>
					</button>
					<button
						class="header-action-btn contact"
						@click.stop="contactSupport"
					>
						<i class="material-icons">support_agent</i>
						<span>联系客服</span>
					</button>
					<button
						v-if="order.orderState === 1"
						class="header-action-btn refund"
						@click.stop="requestRefund"
					>
						<i class="material-icons">money_off</i>
						<span>申请退款</span>
					</button>
				</div>

				<!-- 订单详情内容 -->
				<div class="order-detail-container">
				<!-- 订单基本信息 -->
				<div class="order-info-card">
					<div class="card-header">
						<div class="header-icon">
							<i class="material-icons">receipt</i>
						</div>
						<div class="header-content">
							<h3>订单信息</h3>
							<p>订单号: {{ order.id }}</p>
						</div>
						<div class="order-status" :class="getStatusClass(order.orderState)">
							{{ getStatusText(order.orderState) }}
						</div>
					</div>
					
					<div class="order-info-content">
						<div class="info-row">
							<span class="label">订单号:</span>
							<span class="value order-id">{{ order.orderId || order.id }}</span>
						</div>
						<div class="info-row">
							<span class="label">下单时间:</span>
							<span class="value">{{ formatDate(order.orderDate) }}</span>
						</div>
						<div class="info-row">
							<span class="label">商家名称:</span>
							<span class="value">{{ order.businessName || '未知商家' }}</span>
						</div>
						<div class="info-row" v-if="order.businessAddress">
							<span class="label">商家地址:</span>
							<span class="value">{{ order.businessAddress }}</span>
						</div>
						<div class="info-row">
							<span class="label">配送地址:</span>
							<span class="value">{{ order.address || '未知地址' }}</span>
						</div>
						<div class="info-row">
							<span class="label">商品金额:</span>
							<span class="value">¥{{ (order.totalPrice - order.deliveryPrice).toFixed(2) }}</span>
						</div>
						<div class="info-row">
							<span class="label">配送费:</span>
							<span class="value">¥{{ order.deliveryPrice?.toFixed(2) || '0.00' }}</span>
						</div>
						<div class="info-row total-row">
							<span class="label">订单总价:</span>
							<span class="value total-price">¥{{ (order.finalTotal || order.totalPrice || order.orderTotal || 0).toFixed(2) }}</span>
						</div>
					</div>
				</div>

				<!-- 配送状态（仅已支付订单显示） -->
				<div v-if="order.orderState === 1 && deliveryStatus" class="delivery-status-card">
					<div class="card-header">
						<div class="header-icon">
							<i class="material-icons">local_shipping</i>
						</div>
						<div class="header-content">
							<h3>配送状态</h3>
							<p>{{ deliveryStatus.currentText }}</p>
						</div>
					</div>
					
					<div class="delivery-timeline">
						<div 
							v-for="(status, index) in deliveryStatus.statuses" 
							:key="index"
							class="timeline-item"
							:class="{ 
								'active': status.step <= deliveryStatus.currentStep,
								'completed': status.step < deliveryStatus.currentStep
							}"
						>
							<div class="timeline-dot">
								<i class="material-icons">{{ status.icon }}</i>
							</div>
							<div class="timeline-content">
								<p class="timeline-text">{{ status.text }}</p>
								<p v-if="status.step === deliveryStatus.currentStep" class="timeline-time">
									预计{{ deliveryStatus.estimatedTime }}分钟后{{ status.step === 6 ? '送达' : '到达下一阶段' }}
								</p>
							</div>
						</div>
					</div>
				</div>

				<!-- 订单商品详情 -->
				<div class="order-items-card">
					<div class="card-header">
						<div class="header-icon">
							<i class="material-icons">shopping_cart</i>
						</div>
						<div class="header-content">
							<h3>商品详情</h3>
							<p>共 {{ orderDetails.length }} 件商品</p>
						</div>
					</div>
					
					<div class="order-items-list">
						<div v-for="(item, index) in orderDetails" :key="index" class="order-item">
							<div class="item-image">
								<img :src="getFoodImage(item.foodImg)" :alt="item.foodName" @error="handleImageError" />
							</div>
							<div class="item-info">
								<h4 class="item-name">{{ item.foodName || '未知商品' }}</h4>
								<p class="item-price">¥{{ item.foodPrice || 0 }} × {{ item.quantity || 0 }}</p>
							</div>
							<div class="item-total">
								¥{{ calculateItemTotal(item) }}
							</div>
						</div>
						<!-- 配送费 -->
						<div class="order-item delivery-fee-item">
							<div class="item-info">
								<h4 class="item-name">配送费</h4>
							</div>
							<div class="item-total">
								¥{{ order.deliveryPrice?.toFixed(2) || '0.00' }}
							</div>
						</div>
					</div>
				</div>

				<!-- 订单操作按钮 -->
				<div class="order-actions">
					<button v-if="order.orderState === 0" class="mdc-button mdc-button--outlined cancel-btn" @click="cancelOrder">
						<i class="material-icons">cancel</i>
						<span>取消订单</span>
					</button>
					<button v-if="order.orderState === 0" class="mdc-button mdc-button--raised pay-btn" @click="payOrder">
						<i class="material-icons">payment</i>
						<span>去支付</span>
					</button>
					<button v-if="order.orderState === 1" class="mdc-button mdc-button--outlined contact-btn" @click="contactBusiness">
						<i class="material-icons">phone</i>
						<span>联系商家</span>
					</button>
				</div>
				</div>
			</div>

		<!-- 底部导航 -->
		<AppFooter></AppFooter>
	</div>
	</div>
</template>

<script>
	import AppFooter from '../components/AppFooter.vue';
	
	export default {
		name: 'OrderDetail',
		data() {
			return {
				order: null,
				orderDetails: [],
				loading: true,
				error: null,
				orderId: null,
				deliveryStatus: null, // 配送状态
				deliveryTimer: null // 配送状态更新定时器
			}
		},
		created() {
			this.orderId = this.$route.params.orderId || this.$route.query.orderId;
			if (this.orderId) {
				this.loadOrderDetail();
			} else {
				this.error = '订单ID不存在';
				this.loading = false;
			}
		},
		methods: {
			goBack() {
				this.$router.go(-1);
			},
			
		async loadOrderDetail() {
			this.loading = true;
			this.error = null;
			
			try {
				// 调用后端接口获取订单详情
				const response = await this.$axios.post('OrdersController/getOrdersById', this.$qs.stringify({
					orderId: this.orderId
				}));
				
				console.log('订单详情响应:', response.data);
				
				if (response.data && (response.data.code === 200 || response.data.code === '200')) {
					const result = response.data.result;
					
					// 调试日志
					console.log('后端返回的orderDate:', result.orderDate);
					console.log('orderDate类型:', typeof result.orderDate);
					
					// 解析原始总价与实付金额
					const originalTotal = result.originalTotal != null
						? parseFloat(result.originalTotal)
						: parseFloat(result.orderTotal || result.totalPrice || 0);
					const finalTotal = result.finalTotal != null
						? parseFloat(result.finalTotal)
						: parseFloat(result.totalPrice || result.orderTotal || 0);
					
					// 构建订单对象
					this.order = {
						orderId: this.orderId,
						id: this.orderId,
						orderDate: result.orderDate, // 使用后端返回的真实时间
						businessName: result.businessName || '未知商家',
						businessAddress: result.businessAddress || '',
						address: result.address || '',
						// totalPrice 统一理解为实付金额，便于前端展示
						totalPrice: finalTotal,
						finalTotal: finalTotal,
						// orderTotal 保留为原始总价，便于对比和统计
						orderTotal: originalTotal,
						deliveryPrice: parseFloat(result.deliveryPrice || 0),
						orderState: result.orderState !== undefined ? Number(result.orderState) : 0,
						refundStatus: result.refundStatus !== undefined ? Number(result.refundStatus) : 0,
						refundReason: result.refundReason || ''
					};
					
					// 调试日志
					console.log('设置的order.orderDate:', this.order.orderDate);
					console.log('格式化后的时间:', this.formatDate(this.order.orderDate));
					
					// 获取订单详情列表
					this.orderDetails = result.priceDetails || [];
					
					// 如果订单已支付，启动配送状态模拟
					if (this.order.orderState === 1) {
						this.startDeliverySimulation();
					}
				} else {
					this.error = response.data?.message || '获取订单信息失败';
				}
			} catch (error) {
				console.error('加载订单详情失败:', error);
				this.error = '订单不存在或加载失败';
			} finally {
				this.loading = false;
			}
		},
		
		startDeliverySimulation() {
			// 模拟配送状态（前端假数据）
			const statuses = [
				{ step: 1, text: '商家已接单', time: 0, icon: 'restaurant' },
				{ step: 2, text: '商家正在准备', time: 2, icon: 'kitchen' },
				{ step: 3, text: '骑手已取餐', time: 5, icon: 'delivery_dining' },
				{ step: 4, text: '正在配送中', time: 8, icon: 'motorcycle' },
				{ step: 5, text: '即将送达', time: 12, icon: 'near_me' },
				{ step: 6, text: '已送达', time: 15, icon: 'check_circle' }
			];
			
			// 随机选择一个状态（模拟不同阶段的订单）
			const randomIndex = Math.floor(Math.random() * statuses.length);
			const currentStatus = statuses[randomIndex];
			
			this.deliveryStatus = {
				currentStep: currentStatus.step,
				currentText: currentStatus.text,
				statuses: statuses,
				estimatedTime: currentStatus.time,
				startTime: new Date()
			};
			
			// 模拟配送进度更新（每5秒更新一次）
			this.deliveryTimer = setInterval(() => {
				if (this.deliveryStatus && this.deliveryStatus.currentStep < 6) {
					// 随机增加配送进度
					if (Math.random() > 0.7) {
						this.deliveryStatus.currentStep++;
						const nextStatus = statuses[this.deliveryStatus.currentStep - 1];
						if (nextStatus) {
							this.deliveryStatus.currentText = nextStatus.text;
							this.deliveryStatus.estimatedTime = nextStatus.time;
						}
					}
				} else {
					// 配送完成，清除定时器
					if (this.deliveryTimer) {
						clearInterval(this.deliveryTimer);
						this.deliveryTimer = null;
					}
				}
			}, 5000);
		},
		
		getWanjiaOrder(orderId) {
			// 万家饺子店订单数据
			const wanjiaOrders = [
				{
					id: 'WJ001',
					orderId: 'WJ001',
					businessName: '万家饺子（天津大学店）',
					businessAddress: '沈阳浑南区软件园E18楼',
					deliveryAddress: { address: '天津大学北洋园校区' },
					orderState: 0, // 0-待支付
					totalPrice: 51.10,
					deliveryPrice: 3.00,
					priceDetails: [
						{
							foodName: '纯肉鲜肉（水饺）',
							foodPrice: 16.10,
							quantity: 1,
							foodImg: require('@/assets/sp01.png')
						},
						{
							foodName: '玉米鲜肉（水饺）',
							foodPrice: 15.00,
							quantity: 1,
							foodImg: require('@/assets/sp02.png')
						},
						{
							foodName: '虾仁三鲜（蒸饺）',
							foodPrice: 20.00,
							quantity: 1,
							foodImg: require('@/assets/sp03.png')
						}
					],
					userName: '张先生',
					userId: 'USER001',
					orderTotal: 51.10,
					orderDate: '2024-01-15T10:30:00'
				},
				{
					id: 'WJ002',
					orderId: 'WJ002',
					businessName: '万家饺子（天津大学店）',
					businessAddress: '沈阳浑南区软件园E18楼',
					deliveryAddress: { address: '天津大学北洋园校区' },
					orderState: 1,
					totalPrice: 38.00,
					deliveryPrice: 3.00,
					priceDetails: [
						{
							foodName: '牛肉萝卜饺子',
							foodPrice: 22.00,
							quantity: 1
						},
						{
							foodName: '芹菜猪肉饺子',
							foodPrice: 16.00,
							quantity: 1
						}
					],
					userName: '李女士',
					userId: 'USER002',
					orderTotal: 38.00,
					orderDate: '2024-01-14T18:45:00'
				},
				{
					id: 'WJ001',
					orderId: 'WJ001',
					businessName: '万家饺子（天津大学店）',
					businessAddress: '沈阳浑南区软件园E18楼',
					deliveryAddress: { address: '天津大学北洋园校区' },
					orderState: 1,
					totalPrice: 52.00,
					deliveryPrice: 3.00,
					priceDetails: [
						{
							foodName: '虾仁韭菜饺子',
							foodPrice: 25.00,
							quantity: 1
						},
						{
							foodName: '白菜猪肉饺子',
							foodPrice: 15.00,
							quantity: 1
						},
						{
							foodName: '韭菜鸡蛋饺子',
							foodPrice: 14.00,
							quantity: 1
						}
					],
					userName: '王先生',
					userId: 'USER003',
					orderTotal: 52.00,
					orderDate: '2024-01-13T12:15:00'
				}
			];
			
			return wanjiaOrders.find(order => order.id === orderId || order.orderId === orderId);
		},
			
			getFoodImage(imagePath) {
				if (!imagePath) return this.getDefaultImage();
				// 如果是完整的HTTP URL，直接返回
				if (imagePath.startsWith('http')) {
					return imagePath;
				}
				// 如果是 base64 格式，直接返回
				if (imagePath.startsWith('data:image')) {
					return imagePath;
				}
				// 如果是相对路径（以/开头），拼接服务器地址
				if (imagePath.startsWith('/')) {
					// 如果已经是 /img/ 开头，直接拼接
					if (imagePath.startsWith('/img/')) {
						return `http://localhost:8888${imagePath}`;
					}
					// 如果是其他路径（如 /2024-10-26/xxx.jpg），需要添加 /img 前缀
					return `http://localhost:8888/img${imagePath}`;
				}
				// 其他情况，添加服务器前缀和路径分隔符
				return `http://localhost:8888/img/${imagePath}`;
			},
			getDefaultImage(){
				// 返回一个包含食物emoji的SVG图片
				const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="#f5f5f5" rx="10"/><text x="100" y="100" font-size="80" text-anchor="middle" dominant-baseline="central">🍜</text></svg>';
				return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)));
			},
			handleImageError(event){
				event.target.src = this.getDefaultImage();
			},
			
			calculateItemTotal(item) {
				const price = parseFloat(item.foodPrice || 0);
				const quantity = parseInt(item.quantity || 0);
				return (price * quantity).toFixed(2);
			},
			
			formatDate(dateString) {
				if (!dateString) return '未知时间';
				
				try {
					let date;
					
					// 处理各种可能的日期格式
					if (typeof dateString === 'string') {
						if (dateString.includes('T')) {
							// ISO 格式: "2024-01-15T10:30:00" 或 "2024-01-15T10:30:00.000Z"
							date = new Date(dateString);
						} else if (dateString.includes(' ')) {
							// MySQL datetime 格式: "2024-01-15 10:30:00"
							date = new Date(dateString.replace(' ', 'T'));
						} else if (dateString.includes('-')) {
							// 只有日期格式: "2024-01-15"
							date = new Date(dateString + 'T00:00:00');
						} else {
							// 尝试直接解析
							date = new Date(dateString);
						}
					} else {
						// 如果是数字时间戳或Date对象
						date = new Date(dateString);
					}
					
					// 检查日期是否有效
					if (isNaN(date.getTime())) {
						console.warn('无效的日期格式:', dateString);
						return '时间格式错误';
					}
					
					return date.toLocaleString('zh-CN', {
						year: 'numeric',
						month: '2-digit',
						day: '2-digit',
						hour: '2-digit',
						minute: '2-digit',
						second: '2-digit'
					});
				} catch (error) {
					console.error('日期格式化错误:', error, dateString);
					return '时间解析失败';
				}
			},
			
			getStatusText(status) {
				// 如果订单有退款状态为2，优先显示"已退款"
				if (status === 4 && this.order && this.order.refundStatus === 2) {
					return '已退款';
				}
				const statusMap = {
					0: '待支付',
					1: '已支付',
					2: '配送中',
					3: '已完成',
					4: '已取消'
				};
				return statusMap[status] || '未知状态';
			},
			
			getStatusClass(status) {
				const classMap = {
					0: 'status-pending',
					1: 'status-paid',
					2: 'status-delivering',
					3: 'status-completed',
					4: 'status-cancelled'
				};
				return classMap[status] || 'status-unknown';
			},
			
			async cancelOrder() {
				if (!confirm('确定要取消这个订单吗？')) return;
				
				try {
					const response = await this.$axios.post('OrdersController/user/cancelOrder', this.$qs.stringify({
						orderId: this.orderId
					}), {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					});
					
					if (response.data && (response.data.code === 200 || response.data.code === '200')) {
						this.$toast?.success('订单已取消');
						// 重新加载订单详情以刷新界面
						await this.loadOrderDetail();
					} else {
						this.$toast?.error(response.data.message || '取消失败');
					}
				} catch (error) {
					console.error('取消订单失败:', error);
					this.$toast?.error('取消失败，请稍后重试');
				}
			},
			
			payOrder() {
				this.$router.push({
					path: '/payment',
					query: { orderId: this.orderId }
				});
			},
			
			contactBusiness() {
				// 这里可以添加联系商家的逻辑
				this.$toast?.info('联系商家功能暂未实现');
			},
			
			// 顶部“客服”按钮：目前同联系商家，后续可接入在线客服/电话等
			contactSupport() {
				this.$toast?.info('客服功能暂未实现，请直接联系商家或平台客服');
			},
			
			// 顶部“申请退款”按钮：前端占位，具体退款流程可后续接入
			requestRefund() {
				if (!this.order || this.order.orderState !== 1) {
					this.$toast?.warning?.('仅已支付订单可申请退款');
					return;
				}
				// 可选：让用户填写退款原因
				const reason = window.prompt('请输入退款原因（可选）：', '');
				
				this.$axios.post('OrdersController/applyRefund', this.$qs.stringify({
					orderId: this.orderId,
					refundReason: reason || ''
				}), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(resp => {
					if (resp.data && (resp.data.code === 200 || resp.data.code === '200')) {
						this.$toast?.success('退款申请已提交，等待商家处理');
						// 刷新订单详情以便后续展示退款状态（如果后端返回）
						this.loadOrderDetail();
					} else {
						this.$toast?.error(resp.data?.message || '退款申请失败');
					}
				}).catch(err => {
					console.error('申请退款失败:', err);
					this.$toast?.error('申请退款过程中出现错误，请稍后重试');
				});
			}
		},
		beforeUnmount() {
			// 清除定时器
			if (this.deliveryTimer) {
				clearInterval(this.deliveryTimer);
				this.deliveryTimer = null;
			}
		},
		components: {
			AppFooter
		}
	}
</script>

<style scoped>
	/* 重置样式 */
	* {
		box-sizing: border-box;
	}

	.wrapper {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部应用栏 */
	.mdc-top-app-bar {
		background-color: #1976D2;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 72px;
		padding: 0 20px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-direction: row;
	}

	.mdc-top-app-bar__title {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}

	.back-btn {
		background: none;
		border: none;
		color: white;
		padding: 20px;
		cursor: pointer;
		border-radius: 50%;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateY(3px);
	}

	.back-btn:hover {
		background-color: rgba(255, 255, 255, 0.15);
		transform: translateY(8px) scale(1.05);
	}

	.back-btn .material-icons {
		font-size: 28px;
	}

	/* 主要内容区域 */
	.main-content {
		padding: 20px 16px;
		/* 使用相对屏幕宽度的底部留白，适配 2340x1080 等高屏手机，避免底部按钮被遮挡 */
		padding-bottom: 24vw;
	}

	/* 加载状态 */
	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 200px;
	}

	.loading-spinner {
		text-align: center;
	}

	.loading-icon {
		font-size: 48px;
		color: #1976D2;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}

	.loading-spinner p {
		margin-top: 16px;
		color: #666;
		font-size: 16px;
	}

	/* 错误状态 */
	.error-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 200px;
	}

	.error-content {
		text-align: center;
		background-color: white;
		padding: 32px;
		border-radius: 16px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.1);
	}

	.error-icon {
		font-size: 64px;
		color: #f44336;
		margin-bottom: 16px;
	}

	.error-content h3 {
		color: #333;
		margin: 0 0 8px 0;
		font-size: 20px;
	}

	.error-content p {
		color: #666;
		margin: 0 0 24px 0;
		font-size: 16px;
	}

	.retry-btn {
		background-color: #1976D2;
		color: white;
		border: none;
		padding: 12px 24px;
		border-radius: 8px;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
		transition: background-color 0.3s;
	}

	.retry-btn:hover {
		background-color: #1565C0;
	}

	/* 订单详情容器 */
	.order-detail-container {
		max-width: 800px;
		margin: 0 auto;
	}

	/* 卡片样式 */
	.order-info-card,
	.order-items-card,
	.delivery-status-card {
		background-color: white;
		border-radius: 16px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.1);
		margin-bottom: 20px;
		overflow: hidden;
	}
	
	/* 配送状态样式 */
	.delivery-timeline {
		padding: 24px;
	}
	
	.timeline-item {
		display: flex;
		align-items: flex-start;
		gap: 16px;
		padding: 12px 0;
		position: relative;
		opacity: 0.4;
		transition: opacity 0.3s;
	}
	
	.timeline-item.active {
		opacity: 1;
	}
	
	.timeline-item.completed {
		opacity: 0.7;
	}
	
	.timeline-dot {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background-color: #e0e0e0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		transition: all 0.3s;
	}
	
	.timeline-item.active .timeline-dot {
		background-color: #4CAF50;
		box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.2);
	}
	
	.timeline-item.completed .timeline-dot {
		background-color: #2196F3;
	}
	
	.timeline-dot .material-icons {
		color: white;
		font-size: 24px;
	}
	
	.timeline-content {
		flex: 1;
		padding-top: 4px;
	}
	
	.timeline-text {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin: 0 0 4px 0;
	}
	
	.timeline-time {
		font-size: 14px;
		color: #666;
		margin: 0;
	}

	/* 顶部操作按钮区域：删除订单 / 联系客服 / 申请退款 */
	.order-wrapper {
		margin-top: 16px;
	}

	.top-action-bar {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap: 12px;
		margin: 0 16px 12px 16px;
	}
	
	.order-id {
		font-family: 'Courier New', monospace;
		font-weight: 600;
		color: #1976D2;
	}
	
	.total-row {
		border-top: 2px solid #e0e0e0;
		margin-top: 8px;
		padding-top: 16px;
		font-weight: 600;
	}
	
	.delivery-fee-item {
		border-top: 1px solid #e0e0e0;
		margin-top: 8px;
		padding-top: 16px;
	}

	.card-header {
		background: linear-gradient(135deg, #1976D2 0%, #42A5F5 100%);
		color: white;
		padding: 20px 24px;
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.header-actions {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.header-action-btn {
		border: 1px solid #ddd;
		background: #ffffff;
		color: #333;
		border-radius: 20px;
		padding: 10px 18px;
		font-size: 14px;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		cursor: pointer;
	}

	.header-content {
		flex: 1;
	}

	.header-content h3 {
		font-size: 20px;
		font-weight: 500;
		margin: 0 0 4px 0;
	}

	.header-content p {
		font-size: 14px;
		opacity: 0.9;
		margin: 0;
	}

	.order-status {
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 20px;
		padding: 8px 16px;
		font-size: 14px;
		font-weight: 500;
	}

	.status-pending { background-color: #ff9800; }
	.status-paid { background-color: #4caf50; }
	.status-delivering { background-color: #2196f3; }
	.status-completed { background-color: #4caf50; }
	.status-cancelled { background-color: #f44336; }

	/* 订单信息内容 */
	.order-info-content {
		padding: 24px;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.info-row:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 16px;
		color: #666;
		font-weight: 500;
	}

	.value {
		font-size: 16px;
		color: #333;
	}

	.total-price {
		font-size: 18px;
		font-weight: 600;
		color: #f44336;
	}

	/* 订单商品列表 */
	.order-items-list {
		padding: 24px;
	}

	.order-item {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 16px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.order-item:last-child {
		border-bottom: none;
	}

	.item-image {
		width: 60px;
		height: 60px;
		border-radius: 8px;
		overflow: hidden;
		flex-shrink: 0;
	}

	.item-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.item-info {
		flex: 1;
	}

	.item-name {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin: 0 0 4px 0;
	}

	.item-price {
		font-size: 14px;
		color: #666;
		margin: 0;
	}

	.item-total {
		font-size: 16px;
		font-weight: 600;
		color: #f44336;
	}

	/* 订单操作按钮 */
	.order-actions {
		display: flex;
		gap: 12px;
		padding: 20px;
		background-color: white;
		border-radius: 16px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.1);
	}

	.mdc-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 12px 20px;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 500;
		text-transform: none;
		transition: all 0.3s ease;
		cursor: pointer;
		border: none;
		flex: 1;
	}

	.mdc-button--raised {
		background-color: #1976D2;
		color: white;
		box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
	}

	.mdc-button--raised:hover:not(:disabled) {
		background-color: #1565C0;
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);
	}

	.mdc-button--outlined {
		background-color: transparent;
		color: #f44336;
		border: 2px solid #f44336;
	}

	.mdc-button--outlined:hover {
		background-color: #f44336;
		color: white;
	}

	.contact-btn {
		background-color: transparent;
		color: #4caf50;
		border: 2px solid #4caf50;
	}

	.contact-btn:hover {
		background-color: #4caf50;
		color: white;
	}

	.mdc-button .material-icons {
		font-size: 18px;
	}

	/* 响应式设计 */
	@media (max-width: 600px) {
		.main-content {
			padding: 16px 12px;
		}
		
		.card-header {
			padding: 16px 20px;
		}
		
		.order-info-content,
		.order-items-list {
			padding: 20px;
		}
		
		.order-actions {
			flex-direction: column;
			padding: 16px;
		}
		
		.mdc-button {
			padding: 10px 16px;
		}
	}
</style>
